<!DOCTYPE html>
<html>
    <head>
        <title>Muhahahahaha....</title>
        
        <script type="text/javascript">
            function init(){
                document.getElementById('A').addEventListener('mousedown', function(evt) {
                    console.info("A:");
                }, false);
                
                document.getElementById('B').addEventListener('mousedown', function(evt) {
                    console.info("B:");
                }, false);
            }
            
            window.addEventListener("load", init, false);
        </script>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        [Click on red, green and then on their intersection and watch the console.]
        <div id="A" style="position: absolute; top: 0px; left: 0px; width: 300px; height: 300px; background-color: rgba(255,0,0,0.5); /*z-index: 100;*/">
        </div>
        
        <div id="B" style="position: absolute; top: 200px; left: 200px; width: 300px; height: 300px; background-color: rgba(0,255,0, 1); ">
        </div>

    </body>
</html>
